<template>
  <div>
    <img :src="GiveFee1" alt="" class="mb-5" />
    <!-- <img :src="GiveFee3" alt="" class="mb-5" /> -->
    <img :src="GiveFee2" alt="" />
  </div>
  <!-- <div>
  </div> -->
  <!-- <div
    class="text-white text-20px cursor-pointer w-[100%] text-center mt-20px shake-give"
    @click="govip"
  >
    <n-button type="primary" :style="{ width: '120px', height: '60px' }">了解等级会员</n-button>
  </div> -->
</template>

<script setup lang="ts">
import GiveFee1 from '@renderer/assets/huarundian_1.jpg'
import GiveFee2 from '@renderer/assets/huarundian_2.jpg'
// import GiveFee3 from '@renderer/assets/小时价格.png'
import { useRouter } from 'vue-router'
const router = useRouter()
const govip = () => {
  router.push({ name: 'Vip' })
}
</script>

<style scoped>
.shake-give {
  animation: shake-give 1000ms ease-in-out 10;
}
@keyframes shake-give {
  /* 垂直抖动，核心代码 */
  10%,
  90% {
    transform: translate3d(0, -1px, 0);
  }
  20%,
  80% {
    transform: translate3d(0, +2px, 0);
  }
  30%,
  70% {
    transform: translate3d(0, -4px, 0);
  }
  40%,
  60% {
    transform: translate3d(0, +4px, 0);
  }
  50% {
    transform: translate3d(0, -4px, 0);
  }
}
</style>
